<template>
  <px-calendar ref="calendar" v-model="currentDate" class="bench-canendar">
    <template #header>
      <div />
    </template>
    <template #date-cell="{ data }">
      <px-popover :width="184" trigger="click">
        <template #reference>
          <div class="bench-canlendar-day">
            <p :class="['bench-canlendar-cell', hasTask(calendarData[data.day]) ? 'has-task' : ''].join(' ')">
              {{ data.day.split("-").slice(2).join() }}
            </p>
          </div>
        </template>
        <div class="popover">
          <div class="day">{{ formatDay(data.day) }}</div>
          <px-scrollbar max-height="250px">
            <ul v-if="calendarData[data.day]?.length" class="task-list">
              <li
                v-for="item in calendarData[data.day]"
                :key="`${item.taskId}${item.id}${item.taskResourceId}`"
                :class="['task-item', item.taskStatus === 'DONE' ? 'done' : ''].join(' ')"
                @click="handleClick(item)"
              >
                <px-tooltip effect="dark" :content="item.taskTitle" placement="top">
                  <px-text class="mx-1" truncated>{{ item.taskTitle }}</px-text>
                </px-tooltip>
              </li>
            </ul>
            <div v-else class="empty">无日程安排</div>
          </px-scrollbar>
        </div>
      </px-popover>
    </template>
  </px-calendar>
</template>
<script lang="ts" setup>
import type { CalendarInstance } from "px-ui";
import { ref } from "vue";
// import { MyCalendar } from "@/api/bench";
defineProps(["calendarData", "currentMonth"]);
const currentDate = defineModel("currentDate");
const calendar = ref<InstanceType<typeof CalendarInstance>>();
// const currentDate = ref();
// const calendarData = ref({});
// const currentMonth = ref();
const formatDay = date => {
  const dateArr = date.split("-");
  return `${dateArr[0]}年${dateArr[1]}月${dateArr[2]}日`;
};
const emits = defineEmits(["handleClick", "getData"]);
// const selectDate = (val: InstanceType<typeof CalendarDateType>) => {
//   if (!calendar.value) return;
//   calendar.value.selectDate(val);
//   emits("getData");
// };
// 获取我的日程
// const getMycalendar = async () => {
//   const oDate = currentDate.value ? new Date(currentDate.value) : new Date();
//   const oYear = oDate.getFullYear();
//   const oMonth = oDate.getMonth() + 1;
//   if (currentMonth.value === oMonth) {
//     return;
//   }
//   currentMonth.value = oMonth;
//   calendarData.value = {};
//   const data: any = await MyCalendar({ year: oYear, month: oMonth });
//   data.forEach(item => {
//     calendarData.value[item.date] = item.taskList;
//   });
// };
// 是否有待处理任务
const hasTask = data => {
  if (data) {
    const flag = !!data.find(item => {
      return item.taskStatus === "UNDO";
    });
    return flag;
  }
};
// 跳转详情
const handleClick = data => {
  emits("handleClick", data);
  // if (url) {
  //   window.open(url);
  // }
};
// watchEffect(() => {
//   getMycalendar();
// });
</script>
<style lang="scss" scoped>
.bench-canendar {
  height: 100%;

  .bench-canlendar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .icon-group {
    display: flex;
    margin-left: 25px;
  }

  :deep(.px-calendar__header) {
    padding: 0;
    border: none;
  }

  :deep(.px-calendar__body) {
    height: 100%;
    font-size: 12px;
    padding: 0;
    font-size: 12px;

    thead th {
      font-weight: bold;
    }
    .px-calendar-table {
      height: 100%;
    }
    .px-calendar-table td {
      border: none;

      &.is-today {
        color: #000;

        .bench-canlendar-cell {
          background: #d8e6fd;
        }
      }

      &.is-selected {
        color: #000;
        background-color: transparent;
        box-shadow: none;

        .bench-canlendar-cell {
          background: #d8e6fd;
          border: 1px solid #3b82f6;
        }
      }
    }

    .px-calendar-day {
      height: 30px;
      padding: 0;
    }

    .bench-canlendar-day {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 6px;
      font-size: 12px;
    }
  }

  .bench-canlendar-cell {
    width: 20px;
    height: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;

    &.has-task {
      position: relative;

      &::after {
        position: absolute;
        bottom: -12px;
        left: 50%;
        display: block;
        width: 8px;
        height: 8px;
        content: "";
        background: #3b82f6;
        border-radius: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

.popover {
  .day {
    height: 18px;
    // font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #000;
  }

  .task-list {
    margin-top: 8px;
  }

  .task-item {
    position: relative;
    height: 18px;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #000;
    cursor: pointer;
    overflow: hidden;

    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 4px;
      height: 4px;
      content: "";
      background: #3b82f6;
      border-radius: 50%;
      transform: translateY(-50%);
    }

    &.done {
      .px-text {
        line-height: 1;
        color: #88898d;
      }

      &::before {
        background: #d3e4ff;
      }
    }
  }
}

.empty {
  height: 100px;
  line-height: 100px;
  color: #88898d;
  text-align: center;
}
</style>
